<template>
  <view>
    <view v-if="(loaded || list.itemIndex < 15) && list.items && list.items.length > 0" class="uni-indexed-list__list">
      <view v-if="loaded || list.itemIndex < 15" class="uni-indexed-list__title-wrapper">
        <text v-if="list.items && list.items.length > 0" class="uni-indexed-list__title">{{ list.key }}</text>
      </view>
      <!--    <view>{{clickAreaCode}}</view>
      <view>{{clickAreaName}}</view> -->
      <!-- <view>{{JSON.stringify(list)}}</view> -->
      <!-- <view>{{JSON.stringify(list)}}</view> -->
      <view v-for="(item, index) in list.items" :key="index" class="uni-indexed-list__item"
        hover-class="uni-indexed-list__item--hover">
        <view class="uni-indexed-list__item-container"
          @click="onClick(idx, index, item.name.areaCode,item.name.areaName)">

          <!-- <view>{{JSON.stringify(item)}}</view> -->
          <view class="uni-indexed-list__item-border "
            :class="{'uni-indexed-list__item-border--last':index===list.items.length-1}">
            <view v-if="showSelect" style="margin-right: 20rpx;">
              <uni-icons :type="item.checked ? 'checkbox-filled' : 'circle'" :color="item.checked ? '#007aff' : '#aaa'"
                size="24" />
            </view>
            <text class="uni-indexed-list__item-content def-color"
              :class="{'check_color': clickAreaName == item.name.areaName && clickAreaCode == item.name.areaCode}">{{ item.name.areaName }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import uniIcons from '../uni-icons/uni-icons.vue'
  export default {
    name: 'UniIndexedList',
    components: {
      uniIcons
    },
    props: {
      loaded: {
        type: Boolean,
        default: false
      },
      idx: {
        type: Number,
        default: 0
      },
      clickAreaCode: {
        type: Number,
        default: -1
      },
      clickAreaName: {
        type: String,
        default: ''
      },
      list: {
        type: Object,
        default () {
          return {}
        }
      },
      showSelect: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {};
    },
    methods: {
      onClick(idx, index, clickAreaCode, clickAreaName) {
        this.$emit("itemClick", {
          idx,
          index,
          clickAreaCode,
          clickAreaName
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .uni-indexed-list__list {
    font-family: FrankNew-Regular, NotoSansSC-Regular;
    background-color: #ffffff;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    position: relative;
  }

  .uni-indexed-list__item {
    font-size: 12px;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex: 1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .uni-indexed-list__item-container {
    padding-left: 44rpx;
    flex: 1;
    position: relative;
    /* #ifndef APP-NVUE */
    display: flex;
    box-sizing: border-box;
    /* #endif */
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .uni-indexed-list__scroll {
    padding-left: 10rpx;
  }

  .uni-indexed-list__item-border {
    flex: 1;
    position: relative;
    /* #ifndef APP-NVUE */
    display: flex;
    box-sizing: border-box;
    /* #endif */
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    // padding: 20rpx;
    padding: 24rpx;
    padding-left: 0;
  }

  .uni-indexed-list__item-border--last {
    border-bottom-width: 0px;
  }

  .uni-indexed-list__item-content {
    flex: 1;
    font-size: 28rpx;
  }

  .uni-indexed-list {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
  }

  .uni-indexed-list__title-wrapper {
    /* #ifndef APP-NVUE */
    display: flex;
    width: 100%;
    /* #endif */
    position: absolute;
    left: 0rpx;
    top: 20rpx;
  }

  .uni-indexed-list__title {
		width: 44rpx;
		text-align: left;
    padding-top: 12rpx;
    line-height: 32rpx;
    font-size: 28rpx;
    color: #c6c6c6;
		font-family: FrankNew-Regular;
  }

  .def-color {
    position: relative;
    color: #C6C6C6;
    font-family: NotoSansSC-Regular;
  }
  .check_color{
    position: relative;
    color: #000000;
  }
  .mcl-icon_correct {


  }
</style>
